<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    body{
      text-align: center;
    }
    ul li{
      list-style: none;
      line-height: 40px;
    }
  </style>
</head>
<body>
  <div id="app">
    <h3>搜索列表</h3>
    <label><input type="text" placeholder="请输入搜索的姓名" v-model="searchStr"></label>
    <div>
      <h3>排序</h3>
      <button @click="setOrderType(2)">年龄升序</button>
      <button @click="setOrderType(1)">年龄降序</button>
      <button @click="setOrderType(0)">还原</button>
    </div>
    <ul>
      <li v-for="(p, index) in filterPersons">
        {{index + 1}} - 姓名: {{p.name}}, 性别: {{p.sex}}, 年龄: {{p.age}}, 手机: {{p.phone}}
      </li>
    </ul>
  </div>
  <script src="js/vue.js"></script>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          persons: [
            {name: '张三', sex: '女', age: 19, phone: '18921212121'},
            {name: '李四', sex: '男', age: 29, phone: '18921221121'},
            {name: '王五', sex: '女', age: 39, phone: '18921788721'},
            {name: '赵六', sex: '男', age: 49, phone: '18921556121'},
            {name: '李四', sex: '男', age: 29, phone: '18921221121'},
            {name: '王五', sex: '女', age: 39, phone: '18921788721'},
            {name: '李四', sex: '男', age: 29, phone: '18921221121'},
            {name: '王五', sex: '女', age: 39, phone: '18921788721'},
            {name: '王五', sex: '女', age: 39, phone: '18921788721'},
            {name: '赵六', sex: '男', age: 49, phone: '18921556121'},
            {name: '李思思', sex: '男', age: 29, phone: '18921221121'},
            {name: '张三', sex: '女', age: 19, phone: '18921212121'},
            {name: '李四', sex: '男', age: 29, phone: '18921221121'},
            {name: '王五', sex: '女', age: 39, phone: '18921788721'},
            {name: '赵六', sex: '男', age: 49, phone: '18921556121'},
            {name: '李四', sex: '男', age: 29, phone: '18921221121'},
            {name: '王五', sex: '女', age: 39, phone: '18921788721'},
            {name: '李四', sex: '男', age: 29, phone: '18921221121'},
            {name: '王五', sex: '女', age: 39, phone: '18921788721'},
            {name: '王五', sex: '女', age: 39, phone: '18921788721'},
            {name: '赵六', sex: '男', age: 49, phone: '18921556121'},
            {name: '李五五', sex: '男', age: 29, phone: '18921221121'}
          ],
          // 关联输入框
          searchStr: '',
          // flag: 0: 默认 1: 升序  2: 降序
          orderType: 0
        }
      },
      // 计算属性
      computed:{
         filterPersons(){
           // 1. 取出相关的属性
           const {persons, searchStr, orderType} = this;
           // 2. 定义过滤数组
           let arr = [...persons];
           // 3. 根据条件过滤
           if(searchStr.trim()){
              arr = persons.filter((p)=>{
                return p.name.indexOf(searchStr) !== -1;
              });
           }
           // 4. 排序
           if(orderType){
             arr.sort((p1, p2)=>{
               console.log(p1, p2);
               if(orderType === 1){ // 降序
                   return p2.age - p1.age;
                }else { // 升序
                  return p1.age - p2.age;
                }
             });
           }
           // 5. 返回过滤后的数组
           return arr;
         }
      },
      methods: {
        setOrderType(orderType){
           this.orderType = orderType;
        }
      }
    }).mount('#app');
  </script>
</body>
</html>
